<template>
  <div class="containers">
    <div class="canvas" ref="canvas"></div>
    <!-- 工具栏显示的地方 -->
    <div class="bpmn-js-properties-panel" id="js-properties-panel"></div>
  </div>
</template>
<script>
import BpmnModeler from "bpmn-js/lib/Modeler"; // 引入 bpmn-js
import propertiesProviderModule from "bpmn-js-properties-panel/lib/provider/camunda";
import propertiesPanelModule from "bpmn-js-properties-panel";
import camundaModdleDescriptor from "camunda-bpmn-moddle/resources/camunda";

export default {
  data() {
    return {
      bpmnModeler: null,
    };
  },
  methods: {
    createNewDiagram() {
      const bpmnXmlStr = `
     <?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:modeler="http://camunda.org/schema/modeler/1.0" id="Definitions_0omx16q" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="4.9.0" modeler:executionPlatform="Camunda Cloud" modeler:executionPlatformVersion="1.1.0">
  <bpmn:process id="Process_1fv5k4l" isExecutable="true">
    <bpmn:startEvent id="StartEvent_1" />
    <bpmn:intermediateThrowEvent id="Event_1th6nz5" />
  </bpmn:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1fv5k4l">
      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
        <dc:Bounds x="179" y="79" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Event_1th6nz5_di" bpmnElement="Event_1th6nz5">
        <dc:Bounds x="342" y="102" width="36" height="36" />
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn:definitions>


      `;
      // 将字符串转换成图显示出来
      this.bpmnModeler.importXML(bpmnXmlStr, (err) => {
        if (err) {
          console.error(err);
        }
      });
    },
  },
  mounted() {
    const canvas = this.$refs.canvas;
    // 生成实例
    this.bpmnModeler = new BpmnModeler({
      container: canvas,
      propertiesPanel: {
        parent: "#js-properties-panel",
      },
      additionalModules: [propertiesProviderModule, propertiesPanelModule],
      moddleExtensions: {
        camunda: camundaModdleDescriptor,
      },
    });
    this.createNewDiagram(); // 新增流程定义
  },
};
</script>

<style >
/*左边工具栏以及编辑节点的样式*/
.canvas {
  width: 100%;
  height: 100vh;
}

.action {
  position: fixed;
  bottom: 10px;
  left: 10px;
  display: flex;
}
.upload-demo {
  margin-right: 10px;
}

.bpmn-js-properties-panel {
  position: absolute;
  top: 0;
  right: 0px;
  width: 300px;
}


</style>